<template>
  <div class="special_purple">
    <div class="special_purple_header">
      <div class="special_purple_header_select">
        <Select :index="0"></Select>
      </div>
    </div>
    <div class="special_purple_moudle">
      <div class="china_map">
        <ChinaMap :data="qgdtData" />
      </div>
      <div class="year_select">
        <YearSelect />
      </div>
      <div class="special_purple_centersummmery">
        <span class="summmery_title douyu">涉互联网案件人数</span>
        <span class="summmery_number douyu">
          {{ formatNumber(totalCount) }}
        </span>
      </div>
      <div class="special_purple_center_table">
        <CardPurple name="案由分布">
          <Utable :data="anyouTableList" />
        </CardPurple>
      </div>
      <div class="special_purple_moudle_item left">
        <CardPurple name="当事人占比分析">
          <div class="left_top_module">
            <div class="item">
              <div class="icon_wrap">
                <img
                  src="../../assets/image/versionOne/sex.png"
                  alt=""
                  srcset=""
                />
              </div>
              <div class="chart_wrap">
                <div class="lab_wrap">
                  <span>男性 {{ dsrzb.male_proportion }}%</span>
                  <span>{{ dsrzb.female_proportion }}% 女性</span>
                </div>
                <div class="bar_wrap">
                  <span
                    class="purple_bar"
                    :style="{ width: `${dsrzb.male_proportion}%` }"
                  ></span>
                  <span
                    class="pink_bar"
                    :style="{ width: `${dsrzb.female_proportion}%` }"
                  ></span>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="icon_wrap">
                <img
                  src="../../assets/image/versionOne/natural.png"
                  alt=""
                  srcset=""
                />
              </div>
              <div class="chart_wrap">
                <div class="lab_wrap">
                  <span>自然人 {{ dsrzb.natural_person }}%</span>
                  <span>{{ dsrzb.non_natural_person }}% 非自然人</span>
                </div>
                <div class="bar_wrap">
                  <span
                    class="purple_bar"
                    :style="{ width: `${dsrzb.natural_person}%` }"
                  ></span>
                  <span
                    class="pink_bar"
                    :style="{ width: `${dsrzb.non_natural_person}%` }"
                  ></span>
                </div>
              </div>
            </div>
          </div>
        </CardPurple>
        <CardPurple :name="'当事人年龄占比'">
          <div class="left_center_module">
            <p class="info">
              20~40岁人群占：
              <span class="num douyu">{{
                dsrnlzb.between_twenty_forty * 100
              }}</span>
              %
            </p>
            <div class="chart_wrap">
              <Echarts :full-options="AgePropOptions" :loading="allLoading" />
            </div>
          </div>
        </CardPurple>
        <CardPurple :name="'用户地理分布Top5'">
          <Echarts :full-options="UserMapOptions" :loading="allLoading" />
        </CardPurple>
      </div>
      <div class="special_purple_moudle_item right">
        <CardPurple :name="'审管数据'">
          <div class="right_top_module">
            <div class="image_wrap">
              <img
                src="../../assets/image/versionOne/nabla.png"
                alt=""
                srcset=""
              />
            </div>
            <div class="text_wrap">
              <div class="item">
                <span class="lab">立案数</span>
                <div class="item_val">
                  <span class="num douyu">
                    {{ formatNumber(sgsj.las) }}
                  </span>
                  件
                </div>
              </div>
              <div class="item">
                <span class="lab">结案数</span>
                <div class="item_val">
                  <span class="num douyu">
                    {{ formatNumber(sgsj.jas) }}
                  </span>
                  件
                </div>
              </div>
              <div class="item">
                <span class="lab">服判息诉率</span>
                <div class="item_val">
                  <span class="num douyu">{{ sgsj.fpxsl }}</span>
                </div>
              </div>
            </div>
          </div>
        </CardPurple>

        <div class="card_no_border">
          <div class="title_wrap">
            <span class="l_txt douyu">涉案标的额</span>
            <div class="val">
              <span class="num douyu"> {{ formatNumber(sgsj.bdje) }} </span>
              万元
            </div>
          </div>
          <div class="chart_wrap_two">
            <Echarts :full-options="OnlineLianOptions1" :loading="allLoading" />
            <Echarts :full-options="OnlineLianOptions2" :loading="allLoading" />
          </div>
        </div>

        <CardPurple :name="'申请立案时间分布'">
          <Echarts :full-options="UserTimeOptions" :loading="allLoading" />
        </CardPurple>
      </div>
    </div>
  </div>
</template>

<script setup name="Special">
import { ref, reactive, onMounted, watch } from "vue";
import Select from "@/components/Select.vue";
import CardPurple from "@/components/CardPurple.vue";
import Echarts from "@/components/Echarts.vue";
import YearSelect from "@/components/YearSelect.vue";
import ChinaMap from "./ChinaMap.vue";
import Utable from "../specialCase/Utable.vue";
import { options } from "./options";
import { useYearStore } from "@/store/index.js";
import {
  getSituationAyfb,
  getSituationDsrnlzb,
  getSituationDsrzb,
  getSituationSgsj,
  getSituationYhdfb,
  getSituationZXlal,
  getSituationSqlasjfb,
  getSituationQgdt,
} from "@/api/tsfx";

const yearStore = useYearStore();
const allLoading = ref(true);

//案由分布
const anyouTableList = ref([]);
const queryTableList = (data) => {
  getSituationAyfb(data).then((res) => {
    anyouTableList.value = res.data.data;
  });
};

//当事人年龄占比
const dsrnlzb = ref({});
const AgePropOptions = reactive({
  options: {},
  init: false,
});
const queryDsrnlzb = (data) => {
  getSituationDsrnlzb(data).then((res) => {
    dsrnlzb.value = res.data.data[0];
    AgePropOptions.options = options.AgeProportion(dsrnlzb.value);
  });
};

//当事人占比
const dsrzb = ref({});
const queryDsrzb = (data) => {
  getSituationDsrzb(data).then((res) => {
    dsrzb.value = res.data.data.map((item) => {
      for (let key in item) {
        item[key] = item[key].replace(/%/, "");
      }
      return item;
    })[0];
  });
};

//审管数据
const sgsj = ref({});
const querySgsj = (data) => {
  getSituationSgsj(data).then((res) => {
    sgsj.value = res.data.data[0];
  });
};

//用户地理分布
const UserMapOptions = reactive({
  options: {},
  init: false,
});
const queryYhdfb = (data) => {
  getSituationYhdfb(data).then((res) => {
    UserMapOptions.options = options.MapDistribution(res.data.data);
  });
};
//全国地图
const qgdtData = ref([]);
const totalCount = ref(0);
const queryQgdt = (data) => {
  getSituationQgdt(data).then((res) => {
    qgdtData.value = res.data.data;
    totalCount.value = res.data.data.reduce((pre, cur) => {
      return pre + cur.rs * 1;
    }, 0);
  });
};

//在线立案率、在线庭审率
const OnlineLianOptions1 = reactive({ options: {}, init: false });
const OnlineLianOptions2 = reactive({ options: {}, init: false });
const queryZXlal = (data) => {
  getSituationZXlal(data).then((res) => {
    const data = res.data.data;
    OnlineLianOptions1.options = options.OnlineLianFa({
      value: data[0].zbz.replace(/%/, ""),
      color: "#5572E8",
      type: "blue",
      name: data[0].zbm,
    });
    OnlineLianOptions2.options = options.OnlineLianFa({
      value: data[1].zbz.replace(/%/, ""),
      color: "#FD6EA9",
      type: "pink",
      name: data[1].zbm,
    });
  });
};

//申请立案时间分布
const UserTimeOptions = reactive({
  options: {},
  init: false,
});
const querySituationSqlasjfb = (data) => {
  getSituationSqlasjfb(data).then((res) => {
    UserTimeOptions.options = options.ApplyTimeOptions(res.data.data);
  });
};

watch(
  () => yearStore.year,
  (v) => {
    const data = {
      endtime: v + "1231",
      starttime: v + "0101",
    };
    queryQgdt(data);
    queryTableList(data);
    queryDsrnlzb(data);
    queryDsrzb(data);
    querySgsj(data);
    queryYhdfb(data);
    queryZXlal(data);
    querySituationSqlasjfb(data);
  },
  {
    immediate: true,
  }
);

onMounted(() => {
  setTimeout(() => {
    allLoading.value = false;
  }, 500);
});

function formatNumber(num) {
  return new Intl.NumberFormat().format(num);
}
</script>

<style lang="scss" scoped>
.special_purple {
  width: 100vw;
  height: 100vh;
  background: url("../../assets/image/versionOne/bg.png");
  background-size: cover;

  .special_purple_header {
    width: 100%;
    height: 88px;
    background: url("../../assets/image/versionOne/sp_header.png");
    background-size: cover;

    .special_purple_header_select {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: flex-end;
      padding-right: 20px;
      align-items: flex-end;
      box-sizing: border-box;
    }
  }

  .special_purple_moudle {
    width: 100%;
    height: calc(100% - 88px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    position: relative;

    .china_map {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
    }

    .special_purple_moudle_item {
      width: 480px;
      height: 100%;
      display: flex;
      flex-direction: column;
      gap: 20px;
      color: rgb(61, 81, 176);
    }
  }

  // 左一
  .left_top_module {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;

    .item {
      width: 100%;
      height: 80px;
      background: rgba(35, 48, 114, 0.5);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 20px 10px 10px;

      .icon_wrap {
        width: 60px;
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .chart_wrap {
        width: 355px;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;

        .lab_wrap {
          width: 100%;
          height: 20px;
          display: flex;
          justify-content: space-between;
          align-items: center;

          span {
            font-family: MicrosoftYaHei;
            font-size: 14px;
            color: #d0deee;
            line-height: 19px;
            text-align: center;
            font-style: normal;
          }

          .lab {
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #ffffff;
            margin-right: 10px;
          }

          .lab_value {
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #ffffff;
          }
        }

        .bar_wrap {
          width: 100%;
          height: 20px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-radius: 10px;
          border: 1px solid rgba(133, 153, 217, 0.26);
          box-sizing: border-box;
          padding: 6px;

          .purple_bar {
            background: #5572e8;
            height: 8px;
            border-radius: 4px 0 0 4px;
          }

          .pink_bar {
            background: #fd6ea9;
            height: 8px;
            border-radius: 0 4px 4px 0;
          }
        }
      }
    }
  }

  //  左二
  .left_center_module {
    width: 100%;
    height: 100%;

    .info {
      font-family: MicrosoftYaHei;
      font-size: 14px;
      color: #ffffff;
      line-height: 30px;
      text-align: left;
      font-style: normal;

      .num {
        font-size: 20px;
        color: #5572e8;
        color: rgb(72, 163, 255);
      }
    }

    .chart_wrap {
      width: 100%;
      height: calc(100% - 30px);
      box-sizing: border-box;
    }
  }

  //  左三
  .left_bottom_module {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .image_wrap {
      width: 198px;
      height: 181px;
      display: flex;
      justify-content: center;
    }
  }

  // 右一
  .right_top_module {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .image_wrap {
      width: 198px;
      height: 181px;
      display: flex;
      justify-content: center;
      align-items: center;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .text_wrap {
      width: 222px;
      height: 180px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
    }

    .item {
      width: 222px;
      height: 30px;
      border-radius: 16px;
      border: 1px solid rgba(133, 153, 217, 0.26);
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 16px 0 28px;
      position: relative;

      &::before {
        position: absolute;
        content: "";
        left: 10px;
        top: calc(50% - 3px);
        width: 6px;
        height: 6px;
        background: #5572e8;
        border-radius: 3px;
      }

      .lab {
        font-family: MicrosoftYaHei;
        font-size: 14px;
        color: #d0deee;
        display: inline-block;
      }

      .item_val {
        color: #fff;

        .num {
          display: inline-block;
          font-size: 14px;
        }
      }
    }
  }

  // 右二
  .card_no_border {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    height: 100%;

    .title_wrap {
      width: 468px;
      height: 59px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px 0 60px;
      box-sizing: border-box;
      background: url("../../assets/image/versionOne/title_bar.png") no-repeat;
      background-size: cover;

      .l_txt {
        font-weight: normal;
        font-size: 16px;
        color: #ffffff;
        letter-spacing: 1px;
        text-align: left;
        font-style: normal;
      }

      .val {
        font-family: MicrosoftYaHei;
        font-size: 14px;
        color: #ffffff;
        font-style: normal;

        .num {
          font-weight: normal;
          font-size: 18px;
          color: #5d7dff;
        }
      }
    }

    .chart_wrap_two {
      display: flex;
      justify-content: space-around;
      height: calc(100% - 59px);
      gap: 20px;
      box-sizing: border-box;
      padding: 0 12px;
    }
  }

  // 中间
  .special_purple_center_table {
    bottom: 0;
    height: calc(33% - 13px);
    width: 740px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .special_purple_centersummmery {
    width: 600px;
    height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    position: absolute;
    left: 50%;
    top: 50px;
    transform: translate(-50%, 0);

    .summmery_title {
      font-weight: normal;
      font-size: 24px;
      color: #fff;
      line-height: 27px;
      text-shadow: 0px 4px 6px rgba(0, 0, 0, 0.74);
      text-align: center;
      font-style: normal;
    }

    .summmery_number {
      font-weight: normal;
      font-size: 36px;
      color: #fd6ea9;
      line-height: 40px;
      letter-spacing: 3px;
      text-align: center;
      font-style: normal;
    }
  }

  .year_select {
    position: absolute;
    left: 560px;
    top: 80px;
    z-index: 999;
  }
}
</style>
